<template>
  <div>
    <el-select
      v-model="currentSelectItem"
      :placeholder="placeHolder"
      filterable
      clearable
      style="width: 100%"
    >
      <el-option
        v-for="item in fromData"
        :key="item.key"
        :label="item.value"
        :value="item.key"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { getConfigByKey } from "../../api/System/SystemDict.js";

export default {
  name: 'CommonConfigSelectShow',
  props: {
    selectItem: {
      type: Number,
      default: 0,
    },
    showType: {
      type: Object,
      default: () => ({ key: "", type: "" }),
    },
  },
  data() {
    return {
      fromData: [],
      currentSelectItem: this.selectItem,
      placeHolder: "",
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleSystem.buttons");
    },
    dataList() {
      return this.$t("ModuleSystem.System");
    },
  },
  watch: {
    selectItem(val, oldVal) {
      this.currentSelectItem = val;
    },
  },
  created() {
    this.getCommonConfig();
  },
  methods: {
    getCommonConfig() {
      getConfigByKey(this.showType.key, this.showType.type).then((res) => {
        if (res.code === 200) {
          this.placeHolder = res.data[0].name;
          this.fromData = JSON.parse(res.data[0].value);
          if (this.fromData[0].key !== 0) {
            this.fromData.unshift({ key: 0, value: this.$t("ModuleSystem.buttons.PleaseSelect") });
          }
        }
      });
    },
  },
};
</script>
